<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="detailImg-box">
					<image src="../../../static/img/detailBg.png" mode="aspectFill"
						style="width: 100vw;height: 112.5vw;position: absolute;z-index: 1;"></image>
					<div class="bird">
						<image src="../../../static/img/detailBorder.png" mode="aspectFill"
							style="width: 82.93vw;height: 82.93vw;position: absolute;z-index: 3;top: 8.53vw;left: 8.53vw;">
						</image>
						<image v-if="!!productInfo.info.cover" :src="productInfo.info.cover" mode="aspectFill"
							style="position: absolute;z-index: 2;width: 78.67vw;height: 78.67vw;top: 10vw;left: 10vw;border-radius: 6.4vw;">
						</image>
						<image src="../../../static/img/lookBig.png" mode="aspectFill"
							style="width: 6.4vw;height: 6.4vw;position: absolute;top: 12.8vw;right: 12.8vw;z-index: 6;"
							@tap.stop="lookBig(productInfo.info.cover)">
						</image>
					</div>
				</div>
				<div class="radius-box">
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="enter-img" style=""></image>
				</div>
				<div class="info-box">
					<div class="info-top">
						<div class="info-left">
							<image src="../../../static/img/num.png" mode="aspectFill" class="left-img"></image>
							<span class="left-text">{{ productInfo.info.nftMaxSupply }}份</span>
						</div>
						<div class="info-right" v-if="productInfo.limitTime.info.status == 'ing'">
							<image src="../../../static/img/detailEnter.png" mode="heightFix" class="image427"></image>
							<span class="right-text">进行中</span>
						</div>
						<div class="info-right" v-else-if="productInfo.limitTime.info.status == 'done'">
							<span class="right-text" style="color: #bbb;">已结束</span>
						</div>
					</div>

					<span class="info-title">{{ productInfo.info.spuTitle }}</span>

					<div class="tag-box">
						<block v-if="productInfo.info.tags">
							<span class="tag-border"
								v-for="item1 in productInfo.info.tags.split(',')">{{ item1 }}</span>
						</block>
					</div>

					<span class="info-desc">{{ productInfo.info.desc }}</span>

					<div class="creator-box">
						<div class="creator-left">
							<image :src="productInfo.creator.avatar" mode="aspectFill" class="cerator-img"></image>
							<div class="creator-text">
								<span class="jiu-font28-fff center">
									{{ productInfo.creator.name }}
									<label class="creator-border">创作者</label>
								</span>
								<span class="jiu-font24-555"
									style="margin-top: 0.27vw;">ID：{{ productInfo.creator.id }}</span>
							</div>
						</div>
						<div class="creator-btn jiu-font24-000" @tap="guan">关注</div>
					</div>

				</div>

				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 合成材料 ··</div>

				<div style="background-color: #1b1b1b;padding-bottom: 6.4vw;" v-if="skuIdList.length > 0">
					<div class="collection-list">
						<div class="collection-item" v-for="item,index in productInfo.materials">
							<div class="collection-border" style="background-color: #000;position: relative;">
								<div class="collection-num jiu-font10-a97">
									{{ selectSkuIdList[item.id].length }}/{{ item.count }}</div>
								<image v-if="!!item.cover" :src="item.cover" mode="aspectFill" class="collection-img">
								</image>
								<image src="../../static/img/add-mtl.png" mode="aspectFill" class="image853"
									@tap.stop="add(item,index)">
								</image>
								<image v-if="lastConfirmList[item.id]" src="../../static/img/add-over.png" mode="aspectFill" class="image853"
									@tap.stop="add(item,index)" >
								</image>
							</div>
							<span class="jiu-font24-fff"
								style="width: 26.13vw;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{ item.title }}</span>
						</div>
					</div>
					<div class="synthesis-btn jiu-font28-000" @tap="nowSynthesis">立即合成</div>
					<div style="text-align: center;margin-top: 2.13vw;">
						<u-count-down :timestamp="timestamp" bg-color="#1b1b1bd" color="#FFCE80"
							separator-color="#FFCE80" font-size="24" separator-size="24" :show-days="false">
						</u-count-down>
					</div>
				</div>

				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 合成介绍 ··</div>

				<div class="bottomText-box">
					<span class="bottomText-title">关于数字藏品</span>
					<span
						class="bottomText-text">数字藏品是指使用区块链技术，对应特定的作品、艺术品生成的唯一数字凭证，在保护其数字版权的基础上，实现真实可信的数字化发行、购买、收藏和使用。本平台的数字藏品是基于[元创链]技术协议发行的数字商品，每件藏品在[元创链]都有链上唯一标识，限量发行、不可篡改、不可复制。</span>
					<span class="bottomText-title">购买须知</span>
					<span
						class="bottomText-text">数字藏品为虚拟数字商品，并非实物，仅限经实名认证且年满18周岁的中国大陆用户购买。数字藏品的版权归发行方和原创者所有，除另外获得版权拥有者的书面同意外，用户不得将数字藏品用于任何商业用途。</span>
					<span
						class="bottomText-text">请您于10分钟内完成数字藏品支付，本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易、欺诈、或以任何其他非法行为进行使用。</span>
				</div>
			</ma-refresh>
		</ma-body>
		<u-popup v-model="synthesisShow" mode="bottom" border-radius="32">
			<div class="popBig-box">
				<div class="popInfo-box">
					<image :src="productInfo.materials[selectIndex].cover" mode="aspectFill" class="info-cover"></image>
					<div class="infoTitle-box">
						<span class="jiu-font32-fff"
							style="font-size: 4.8vw;">{{ productInfo.materials[selectIndex].title }}</span>
						<div class="jiu-font32-555"
							style="font-size: 3.2vw;display: flex;flex-direction: column;flex: 1;justify-content: end;">
							<span>请选择藏品编号</span>
							<span>合成后，用作材料的藏品将会销毁</span>
						</div>
					</div>
				</div>
				<div class="num-box">
					<span class="jiu-font32-555" style="font-size: 3.73vw;">藏品编号</span>
					<div class="select-box">
						<span :class="{'select-item': true, 'select': isSelect(item)}" v-for="item,index in skuIdList[selectIndex]"
							@tap.stop="onSelect(item,index)" v-if="item.nftItemId"
							>{{ Number(item.nftItemId) + Number(1) }}</span>
							<!-- :class="{'select':selectSkuIdList[selectIndex][index] == item.id}" -->
					</div>
				</div>
				<div class="popup-btn" @tap="onThrow()">投入合成池</div>
			</div>
		</u-popup>
		<product-modal ref="productModal"></product-modal>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	export default {
		components: {
			productModal
		},
		data() {
			return {
				timestamp: 0,
				productInfo: {},
				spuId: 0,
				synthesisShow: false,
				skuIdList: {}, //存获取到的的数组
				showInfo: {},
				selectIndex: 0,
				selectSkuIdList: {}, //有多少个数组
				lastConfirmList: {}, //最终确定选择的数组
			}
		},
		methods: {
			async getProductDetail(id) {
				this.$u.api.getProductDetail({}, id).then(async res=>{
					this.productInfo = res;
					
					const nowTime = new Date().valueOf();
					const activeTime = new Date(res.limitTime.info.endTime.replace(/-/g, '/'));
					const time = activeTime - nowTime;
					this.timestamp = time / 1000;
					
					let arr = []
					for (let item of res.materials) {
						this.selectSkuIdList[item.id] = [];
						this.lastConfirmList[item.id] = false
					}
					let materials = res.materials;
					for(var e of materials){
						let res = await this.getBySkuId(e.moduleId);
						await arr.push(res);
						res.forEach(re=>{
							if(re.nftItemId == null){
								this.selectSkuIdList[e.id].push(re.collectionId)
							}
						})
					}
					this.skuIdList = arr;
				});
				

			},
			lookBig(image) {
				uni.previewImage({
					urls: [image]
				})
			},
			async add(item, index) {
				this.showInfo = item;
				this.selectIndex = index;
				this.synthesisShow = true;
			},
			async getBySkuId(id) {
				let res = await this.$u.api.getBySkuId({}, id);
				return res;
			},
			nowSynthesis() {
				let list = [];
				for(let i in this.selectSkuIdList){
					this.selectSkuIdList[i].forEach(e=>{
						list.push(e);
					})
				}
				console.log(list)
				this.$u.api.onProductSyntheticMaterial(list, this.productInfo.skuList[0].skuId).then(res=>{
					console.log(res)
					let productInfo = {
						info: res.info
					}
					let obj = productInfo;
					setTimeout(()=>{
						this.$refs.productModal.open({
							obj,
							success: async () => {
								let id;
								if(this.productInfo.info.type == 'synthetic') id = 0;
								else id = 1;
								uni.showToast({
									icon: 'none',
									title: '跳转中，请稍后'
								})
								setTimeout(()=>{
									this.$ma.route.myCollection({
										currentIndex: id
									})
								},4000)
							}
						});
					},1000)
				})
			},
			guan() {
				uni.showToast({
					icon: 'none',
					title: '敬请期待'
				})
			},
			onSelect(item, index) {
				// console.log(item)
				// console.log(this.showInfo.id)
				const i = this.selectSkuIdList[this.showInfo.id].indexOf(item.collectionId);
				if(i != -1) {
					//消除选中
					this.selectSkuIdList[this.showInfo.id].splice(i,1);
				}else {
					//选中
					const hasSelect = this.selectSkuIdList[this.showInfo.id].length;
					const count = this.showInfo.count;
					if(hasSelect >= count) {
						return uni.showToast({
							icon: 'none',title: '已超过可选择数量'
						})
					}
					this.selectSkuIdList[this.showInfo.id].push(item.collectionId);
				}
				this.$forceUpdate();
				// this.selectSkuIdList[this.selectIndex] = this.selectSkuIdList[this.selectIndex].concat(item);
				// var arr = this.selectSkuIdList[this.selectIndex];
				// console.log(arr);
				
				
				// console.log('选中的',this.selectSkuIdList)
				// let select = this.selectSkuIdList[this.selectIndex].push(item.collectionId);
				// console.log('选到的', item.collectionId);
				// console.log('15457', this.selectSkuIdList[this.selectIndex][index])
			},
			onThrow() {
				const { id } = this.showInfo;
				// if(!this.selectSkuIdList[id].length) {
				// 	return uni.showToast({
				// 		icon: 'none',
				// 		title: '请至少选择一个'
				// 	})
				// }
				let flag = this.selectSkuIdList[id].length ? true : false;
				this.lastConfirmList[id] = flag;
				this.synthesisShow = false;
			}
		},
		computed: {
			isSelect() {
				return item => {
					if(this.selectSkuIdList[this.showInfo.id] && this.showInfo.id) {
						const id = this.showInfo.id;
						if(this.selectSkuIdList[id].indexOf(item.collectionId) != -1) return true;
						else return false;
					}
					return false;
				}
			}
		},
		async onLoad(e) {
			this.spuId = e.spuId;
			if (e.spuId) await this.getProductDetail(e.spuId);
		}
	}
</script>

<style lang="scss">
	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.image853 {
		width: 8.53vw;
		height: 8.53vw;
		position: absolute;
		top: 9.87vw;
		left: 9.87vw;
	}

	.bird {
		animation: pulse 4s infinite;
		background-color: #1b1b1b;
		z-index: 99;
		position: relative;
	}

	@-webkit-keyframes pulse {
		0% {
			transfor: translateY(0);
		}

		50% {
			transform: translateY(3vw);
		}

		100% {
			transform: translateY(0);
		}
	}

	.detailImg-box {
		position: relative;
		height: 112.53vw;
	}

	.radius-box {
		height: 6.4vw;
		width: 100vw;
		border-radius: 6vw 6vw 0 0;
		background-color: #1b1b1b;
		// position: absolute;
		bottom: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.enter-img {
			width: 4.27vw;
			height: 4.27vw;
			transform: rotate(90deg);
		}
	}

	.info-box {
		display: flex;
		flex-direction: column;
		padding-left: 5.33vw;
		background-color: #1B1B1B;
		padding-bottom: 8.53vw;

		.info-top {
			display: flex;
			justify-content: space-between;
			padding-right: 5.33vw;

			.info-left {
				display: flex;
				background-color: #323232;

				.left-img {
					width: 10.67vw;
					height: 4.27vw;
				}

				.left-text {
					padding: 0.27vw 1.07vw;
					font-size: 2.67vw;
					font-weight: 300;
					color: #FFCE80;
					border-radius: 0 1.07vw 1.07vw 0;
				}
			}

			.info-right {
				display: flex;
				align-items: center;

				.right-text {
					font-size: 3.2vw;
					font-weight: 300;
					color: #A972FF;
					margin-left: 1.07vw;
				}
			}

		}

		.info-title {
			font-size: 5.87vw;
			font-weight: 500;
			color: #ffffff;
			margin-top: 2.13vw;
		}

		.tag-box {
			display: flex;
			flex-wrap: nowrap;
			margin-top: 2.13vw;

			.tag-border {
				padding: 0.27vw 1.07vw;
				border: 1px solid #A972FF;
				font-size: 2.67vw;
				font-weight: 300;
				color: #A972FF;
				margin-right: 1.07vw;
				border-radius: 1.07vw;
			}
		}

		.info-desc {
			margin-top: 6.4vw;
			font-size: 3.2vw;
			font-weight: 300;
			color: #555555;
			padding-right: 5.33vw;
		}

		.creator-box {
			background-color: #000000;
			padding: 3.2vw 5.33vw;
			padding-left: 4.27vw;
			border-radius: 12.8vw 0 0 12.8vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 8.53vw;

			.creator-left {
				display: flex;
				align-items: center;

				.cerator-img {
					width: 10.67vw;
					height: 10.67vw;
					display: block;
					border-radius: 50%;
					margin-right: 2.13vw;
				}

				.creator-text {
					display: flex;
					flex-direction: column;
				}

				.creator-border {
					padding: 0vw 1.33vw;
					border-radius: 1.07vw;
					border: 1px solid #A972FF;
					color: #A972FF;
					font-size: 2.67vw;
					font-weight: 300;
					margin-left: 1.07vw;
				}
			}
		}
	}

	.creator-btn {
		padding: 0 5.33vw;
		line-height: 8.53vw;
		background-color: #A972FF;
		border-radius: 5.33vw;
	}

	.collection-list {
		display: flex;
		flex-wrap: wrap;
		padding: 2.13vw 0vw 0vw 5.33vw;
		background-color: #1b1b1b;

		.collection-item {
			display: flex;
			flex-direction: column;
			margin-top: 4.27vw;
			margin-right: 2.4vw;

			.collection-border {
				position: relative;
				padding: 1.07vw;
				width: 28.27vw;
				height: 28.27vw;
				border-radius: 4.27vw;

				.collection-img {
					width: 26.13vw;
					height: 26.13vw;
					border-radius: 4.27vw;
				}

				.collection-num {
					position: absolute;
					bottom: 1.07vw;
					right: 1.04vw;
					z-index: 1;
					width: 12.8vw;
					line-height: 6.4vw;
					text-align: center;
					background-color: #000;
					border-radius: 4vw 0 0 0;
					font-size: 3.2vw;
				}
			}

			.jiu-font24-fff {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				width: 26.13vw;
				margin-top: 2.67vw;
			}
		}
	}

	.synthesis-btn {
		margin-top: 6.4vw;
		background: #A972FF;
		width: 89.33vw;
		line-height: 12.8vw;
		border-radius: 6.4vw;
		text-align: center;
		margin-left: 5.33vw;
	}

	.bottomText-box {
		padding: 2.13vw 5.33vw 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;

		.bottomText-title {
			color: #aaaaaa;
			font-size: 3.73vw;
			font-weight: 500;
			margin-top: 4.27vw;
			display: block;
		}

		.bottomText-text {
			color: #555555;
			font-size: 3.2vw;
			font-weight: 300;
			margin-top: 2.13vw;
		}
	}

	.popBig-box {
		padding: 8.54vw 5.33vw 2.13vw 5.33vw;
		background-color: #1b1b1b;

		.popInfo-box {
			display: flex;

			.info-cover {
				width: 32vw;
				height: 32vw;
				border-radius: 5.33vw;
				flex-shrink: 0;
				margin-right: 3.2vw;
			}

			.infoTitle-box {
				display: flex;
				flex-direction: column;
			}
		}

		.num-box {
			margin-top: 4.27vw;

			.select-box {
				margin-top: 2.13vw;
				display: flex;
				flex-wrap: wrap;

				.select-item {
					border-radius: 1.07vw;
					line-height: 8.53vw;
					padding: 0 3.2vw;
					border: 1px solid #555;
					color: #555;
					font-size: 3.2vw;
					font-weight: 300;
					margin-right: 2.13vw;
				}
			}
		}

		.popup-btn {
			margin-top: 8.53vw;
			line-height: 12.8vw;
			width: 89.33vw;
			text-align: center;
			background: #A972FF;
			box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48);
			border-radius: 6.4vw;
			font-size: 3.73vw;
			font-weight: 500;
			color: #222;
		}
	}

	/deep/.select {
		background-color: #A972FF;
		color: #000000 !important;
		font-weight: 500 !important;
	}
</style>
